<template>
  <div class="content2">
      <div class="box" v-for="(v,i) in arr" :key="i">
              <img :src="v.img" alt="">
              <p>{{v.goodName}}</p>
              <p class="p1">{{v.goodMessage}}</p>
              <p class="p2">￥<span>{{v.goodPrice}}</span></p>
    </div>
  </div>
</template>

<script>
import link from "@/apis/link.js"
export default {
        data(){
        return {
            arr:[]
        }
    },
    mounted(){
        link("/Content2").then((ok)=>{
            console.log(ok.data);
            this.arr = ok.data
        })
    }
}
</script>

<style lang="scss" scoped>
.content2{
    width: 4.08rem;
    background-color: #f2f2f4;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
        .box{
            width: 1.14rem;
            height: 2.05rem;
            background-color: white;
            padding: 0.1rem;
            img{
                width: 1.13rem;
                height: 1.13rem;
                display: block;
                margin: auto;
                margin-bottom: 0.2rem;
            }
            p{
                font-size: 0.06rem;
                text-align: center;
                line-height: 0.18rem;
            }
            .p1{
                color:  #666666;
                font-size: 0.045rem;
            }
            .p2{
                   color: #ce0e2d;
                   font-size: 0.18rem;
            }
        }
    }

 
</style>